<template>
  <div :id="id" :chartType="chartType" :headList="headList" :dataList="dataList" :style="{height:height, width:width}" />
</template>

<script>
const serieDataItem = {
    name: '',
    type: '',
    barMaxWidth: 50,
    barGap: '10%',
    itemStyle: {
      borderWidth: 1,
      borderColor: "#8fa1e6",
      areaColor: "#b0defa",
      normal: {
        color: '#59aff2',
        label: {
          show: true,
          textStyle: {
            color: '#666666'
          },
          position: 'top',
          formatter(p) {
            return p.value > 0 ? p.value : ''
          }
        }
      }
    },
    data: []
}
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'chart'
    },
    title: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#00acac'
    },
    chartType: {
      type: String,
      default: 'bar'
    },
    headList: {
      type: [Array],
      default: () => []
    },
    dataList: {
      type: [Array],
      default: () => []
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null,
      yName: ''
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  watch: {
    chartType() {
      this.initChart()
    },
    headList() {
      this.initChart()
    }
  },
  methods: {
    initChart() {
      const app = this
      this.chart = null
      this.chart = echarts.init(document.getElementById(this.id))
      const xData = []
      if (app.dataList && app.dataList.length > 0) {
          app.dataList.forEach(function(item) {
            xData.push(item.name)
          })
      }
      const series = []
      if (app.headList && app.headList.length > 0) {
          app.headList.forEach(function(header, index) {
              const serie = JSON.parse(JSON.stringify(serieDataItem))
              serie.name = header
              serie.type = app.chartType
              serie.itemStyle.normal.color = app.color
              serie.data = []
              const valueList = []
              app.dataList.forEach(function(value) {
                  valueList.push(value['value' + index])
              })
              serie.data = valueList
              series.push(serie)
          })
      }

      app.chart.setOption({
        backgroundColor: '#FFFFFF',
        title: {
          text: app.title,
          x: 'center',
          top: '20',
          textStyle: {
            color: '#333333',
            fontSize: '14'
          },
          subtextStyle: {
            color: '#666666',
            fontSize: '16'
          }
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            snap: false,
            label: {
              margin: 10
            },
            textStyle: {
              color: '#666666'
            }
          },
          triggerOn: 'mousemove',
          showContent: true,
          alwaysShowContent: false,
          borderWidth: 0,
          confine: false,
          formatter(p) {
            return p[0].name + ' : ' + p[0].value
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          borderWidth: 0,
          top: 60,
          bottom: 50,
          textStyle: {
            color: '#666666'
          }
        },
        legend: {
          x: 'center',
          bottom: 'bottom',
          textStyle: {
            color: '#666666'
          },
          data: this.headList
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#666666'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 0
          },
          data: xData
        }],
        yAxis: [{
          type: 'value',
          name: app.yName,
          splitLine: {
            lineStyle: {
              type: 'dashed'
            },
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#666666'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0
          },
          splitArea: {
            show: false
          }
        }],
        series: series
      }, true)
    }
  }
}
</script>
